<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>hello world</h1>
      <p>Vue真简单啊</p>
      <p>name:{{_data.name}}</p>
      <p>name:{{name}}</p>
    </div>
    <script>
      /*
        vue中data配置项为什么要写成一个函数
          * 当一个组件被定义，data 必须声明为返回一个初始数据对象的函数
          * 因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！
          * 通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
      */
      const vm = new Vue({
        el: "#app",
        /* data: {
          count: 1,
          name: "小王",
        }, */
        data() {
          return {
            count: 1,
            name: "小王",
          };
        },
      });

      console.log(vm);

      //???把data写成一个对象有什么问题!!!!!!
      /* //实例化一个组件的时候(使用组件的时候),就会把配置项中data中的数据 直接赋值给 组件实例的_data属性上
      组件实例化对象1._data = data;

      //当组件被复用的时候,也会把配置项中的data属性 直接赋值给 新的组件实例的_data属性
      组件实例化对象2._data = data;

      //按照上边的代码来说,其实复用的每一个组件实例的_data属性 保存的都是同一个data数据
      //那么将来一旦某个复用的组件中修改data数据,则另一个相同的复用的组件中的数据也会被修改
      组件实例化对象1._data.count++;
      console.log(组件实例化对象2._data.count);//count值也会跟着发生改变 */




      //!!!!Vue支持配置项data的函数式写法,函数内部返回响应式数据组成的对象
      /*  //实例化一个组件的时候,就会调用配置项中的data方法,并返回一个新的数据对象,放在组件实例上
      组件实例化对象1._data = data();
      //当组件被复用的时候,就会重新调用配置项中的data方法,并返回一个全新的数据对象,发在组件实例上
      组件实例化对象2._data= data();

      //此时组件实例1和组件实例2的_data不是同一个对象,所以互相是不会影响的!! */


      //代码示例
      /* var o1 = {
        count: 1,
      };
      var o2 = o1;
      o2.count++;
      console.log(o1.count); */

      /* function data() {
        var o = {
          count: 0,
        };
        return o;
      }
      var o1 = data();
      var o2 = data();
      o1.count++;
      console.log(o2.count); */
    </script>
  </body>
</html>
